<template>
  <div class="home">
    <van-search
      v-model="searchVal"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/SearchPopup')"
    />
    <van-swipe :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in banner" :key="item.id">
    <img :src="item.image_url" width="100%" alt="" :style="{display:'block'}">
  </van-swipe-item>
</van-swipe>
<transition name="van-fade">
      <div class="popup-shadow" v-if="$store.state.isShowPopupShadow"></div>
    </transition>
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
 
</template>

<script>

import {GetHomeList} from '@/request/api' 

export default {
  name: "Home",
  data() {
    return {
      searchVal: "",
      banner:[]
    };
  },
  created() {
    GetHomeList().then(res =>{
      this.banner = res.data.banner
    })
    .catch(err =>{
      console.log(err);
    })
  },
  components: {},
  methods:{
    handleClickSearch(){
      this.$router.push('/home/searchPopup');
      this.$store.commit("changeIsShowPopupShadow", true);
    }
}
};
</script>
<style lang = "less" scoped>
.popup-shadow{
  width: 100%;
  height:100%;
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  left: 0;
  top: 0;
}
</style>
